<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="/templates/user_template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:define name="title">
        Chocolor:Add order
    </ui:define>

	<ui:define name="content">
		<h:form enctype="multipart/form-data" id="Order">

			<p:messages id="msgs" autoUpdate="true" />
			<p:panelGrid style="margin-top:20px; width:100%; border-style:hidden"
				id="addOrderForm">
				<f:facet name="header">
					<p:row>
						<p:column style="border-style:hidden" colspan="2">Edit order form</p:column>
					</p:row>
				</f:facet>

				<p:row>
					<p:column style="width:200px; border-style:hidden">Client:</p:column>
					<p:column style="border-style:hidden">#{orderEdit.orderDraft.email}</p:column>
					<p:column
						style="width:10%; border-style:hidden; background-color:white"></p:column>
				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Order date:</p:column>
					<p:column style="border-style:hidden">#{orderEdit.orderDraft.orderDraftDate}</p:column>

				</p:row>
				
				<p:row>
					<p:column style="border-style:hidden">Order number:</p:column>
					<p:column style="border-style:hidden">#{orderEdit.orderDraft.orderNumber}</p:column>

				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Choose article: *	</p:column>
					<p:column style="border-style:hidden">
						<p:selectOneMenu value="#{orderEdit.orderDraft.articleId}"
							id="Article" effect="fade" onchange="submit()" required="true">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItems value="#{orderEdit.getArticles()}"
								var="article" itemLabel="#{article.articleId}"
								itemValue="#{article.articleId}" />
						</p:selectOneMenu>
					</p:column>
				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Insert your logotype: * </p:column>
					<p:column style="border-style:hidden">
						<!-- 	ADD LOGOTYPE FIELD     -->
						<p:outputPanel autoUpdate="true" id="Logotype">
							<c:if test="#{!orderEdit.logotypeExists()}">
								<p:fileUpload id="upload"
									fileUploadListener="#{orderEdit.handleLogotypeUpload}"
									mode="advanced" multiple="false" label="Add sketch"
									showButtons="false" auto="true"
									allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
									invalidFileMessage="Invalid file"
									invalidSizeMessage="Invalid file size" sizeLimit="1000000"
									required="true">
								</p:fileUpload>
							</c:if>
							<c:if test="#{orderEdit.logotypeExists()}">
									Logotype sucessfully uploaded<br />
								<p:commandButton value="View logotype" ajax="false"
									immediate="true">
									<p:fileDownload value="#{orderEdit.getBufferDownloadFile()}" />
								</p:commandButton>
								<p:commandButton value="Reset logotype"
									action="#{orderEdit.resetLogotype()}" ajax="false"
									immediate="true" />
							</c:if>
						</p:outputPanel>
						<!-- 	/ADD LOGOTYPE FIELD     -->
					</p:column>

				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Insert your inscription: </p:column>
					<p:column style="border-style:hidden">
						<p:inputText id="Inscription" maxlength="45"
							value="#{orderEdit.orderDraft.inscription}" required="false">
							<p:ajax event="keyup" update="counter" />
						</p:inputText>
						<h:outputText id="counter"
							value="#{orderEdit.getInscriptionCountDown()}" />
					</p:column>

				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Choose frame: * </p:column>
					<p:column style="border-style:hidden">
						<p:selectOneMenu value="#{orderEdit.orderDraft.hasFrame}"
							id="Frame" effect="fade" required="true">
							<f:selectItem itemLabel="Please, select" itemValue="" />
							<f:selectItem itemLabel="No frame" itemValue="false" />
							<f:selectItem itemLabel="With frame" itemValue="true" />
						</p:selectOneMenu>
					</p:column>

				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Select chocolate type: * </p:column>
					<p:column style="border-style:hidden">
						<p:selectOneMenu value="#{orderEdit.orderDraft.chocolateId}"
							id="Chocolate" effect="fade" required="true">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItems value="#{orderEdit.getChocolates()}"
								var="chocolate" itemLabel="#{chocolate.rawType}"
								itemValue="#{chocolate.chocolateId}" />
						</p:selectOneMenu>
					</p:column>

				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Choose packing: * </p:column>
					<p:column style="border-style:hidden">
						<p:selectOneMenu value="#{orderEdit.orderDraft.packingId}"
							id="Packing" required="true" effect="fade">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItems value="#{orderEdit.getPackings()}"
								var="packing" itemLabel="#{packing.packingType}"
								itemValue="#{packing.packingId}" />
						</p:selectOneMenu>
					</p:column>

				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Choose logo colour: * </p:column>
					<p:column style="border-style:hidden">
						<p:selectOneMenu value="#{orderEdit.orderDraft.logoColour}"
							id="LogoColour" required="true" effect="fade">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItems value="#{orderEdit.getAllColours()}" />
						</p:selectOneMenu>
					</p:column>

				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Choose inscription colour: </p:column>
					<p:column style="border-style:hidden">
						<p:selectOneMenu
							value="#{orderEdit.orderDraft.inscriptionColour}"
							id="InscriptionColour" effect="fade" onchange="submit()"
							required="false">
							<f:selectItem itemLabel="None" itemValue="" />
							<f:selectItems value="#{orderEdit.getAllColours()}" />
						</p:selectOneMenu>
					</p:column>

				</p:row>
				<p:row>
					<p:column style="border-style:hidden">Choose plato colour: * </p:column>
					<p:column style="border-style:hidden">
						<p:selectOneMenu value="#{orderEdit.orderDraft.platoColour}"
							id="PlatoColour" required="true" effect="fade"
							onchange="submit()">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItems value="#{orderEdit.getAllColours()}" />
						</p:selectOneMenu>
					</p:column>

				</p:row>

				<p:row>
					<p:column style="border-style:hidden">Choose body colour: </p:column>
					<p:column style="border-style:hidden">
						<p:selectOneMenu value="#{orderEdit.orderDraft.bodyColour}"
							id="BodyColour" effect="fade" onchange="submit()">
							<f:selectItem itemLabel="None" itemValue="" />
							<f:selectItems value="#{orderEdit.getBodyColours()}" />
						</p:selectOneMenu>
					</p:column>

				</p:row>


				<p:row>
					<p:column style="border-style:hidden">Choose quantity: * </p:column>
					<p:column style="border-style:hidden">
						<p:inputText maxlength="15" size="15" id="Quantity"
							value="#{orderEdit.orderDraft.quantity}" />
					</p:column>

				</p:row>

				<f:facet name="footer">
					<p:row>
						<p:column style="text-align:left; border-style:hidden" colspan="2">
							<p:commandButton value="Preview order" id="previewOrder" ajax="false"
								action="#{orderEdit.previewOrder()}" />
							<p:commandButton value="Save draft" id="saveDraft" ajax="false" immediate="true"
								actionListener="#{orderEdit.saveDraft()}" icon="ui-icon-disk" />
							<p:commandButton value="Validate" id="validate"/>
						</p:column>
					</p:row>

				</f:facet>
			</p:panelGrid>

			<p:blockUI block="addOrderForm" trigger="validate">  
        		VALIDATING...<br />
				<p:graphicImage value="/images/ajax-loader.gif" />
			</p:blockUI>

		</h:form>
	</ui:define>
</ui:composition>
